<template>
  <div class="bg_view">
    <div style="padding-bottom: 3.75rem">
      <img style="width: 100%;" :src="data.imgUrl" alt="" />
    </div>
    <XButton
      class="button"
      type="default"
      text="预约服务"
      @click.native="reservation"
    />
    <popup v-model="alertShow" height="68%" is-transparent>
      <div class="box_view">
        <div class="title">请选择为您服务的医生</div>
        <div class="cancel" @click="alertShow = false">
          <img style="width: 100%;" src="@/assets/img/cancel.png" alt="" />
        </div>
        <div
          class="hospitalList"
          v-for="(item, index) in hospitalList"
          :key="index"
          v-show="item.doctorList.length>0"
        >
           <div class="deptName">
           <div class="deptName"> <img style="width: 1.94rem;height: 1.94rem;margin-right: .63rem;" src="@/assets/img/hospital.png" alt="" /><span style="font-weight: 800;font-size: 1.19rem;color: #131A2A;">{{ item.deptName }}</span></div>
           <div class="num" v-show="item.isReg">有号</div>
          </div>
          <div class="doctorList">
            <div class="info" v-for="(item, index) in item.doctorList" :key="index" @click="goDoctorIntroduction(item)">
              <div class="img">
                <img style="width: 100%;border-radius: 50%;background: #F0F5FB;" :src="item.avatarUrl" alt="" />
              </div>
                <div style="font-weight: bold;color: #131A2A;width: 100%;">
                  {{ item.name }}
                </div>
                <div style="font-weight: 400;font-size: .75rem;color: #75809B;width: 100%;">
                  {{ item.jobTitle }}
                </div>
                <div style="font-weight: 400;font-size: .75rem;color: #75809B">
                  {{ item.deptName }}
                </div>
            </div>
          
          </div>
        </div>
        
      </div>
    </popup>
  </div>
</template>

<script>
import { getFeaturedItemList, getFeaturedItemDetail } from "@/api/api";
import { getToken, removeToken, removeWxUserinfoCookies } from "@/api/auth";
import { XButton, Popup } from "vux";

export default {
  data() {
    return {
      data: {},
      hospitalList: [],
      alertShow: false
    };
  },
  components: {
    XButton,
    Popup
  },
  created() {
    getFeaturedItemDetail({
      id: this.$route.query.id
    }).then(res => {
      if (res.code == 200) {
        this.data = res.data;
        this.hospitalList = res.data.hospitalList;
      }
    });
  },
  methods: {
    clearFun() {
      try {
        console.log("清理localStorage");
        localStorage.clear();
      } catch (err) {
        console.log("清理localStorage失败:" + err);
      }
      try {
        console.log("清理token");
        removeToken();
        // removeWxUserinfoCookies();
      } catch (err) {
        alert(err);
        console.log(err);
      }
    },
    isLoginAndIsband() {
      const that = this;
      if (!getToken()) {
        that.$vux.confirm.show({
          // 组件除show外的属性
          content: "未登录,请先登录账号",
          onCancel() {},
          onConfirm() {
            that.clearFun();
            that.$router.push({ path: "/" });
          }
        });
        return false;
      } else {
        if (window.localStorage.getItem("isband") == "false") {
          this.$vux.confirm.show({
            // 组件除show外的属性
            content: "请添加就诊人",
            onCancel() {},
            onConfirm() {
              that.$router.push({ path: "/my_patient" });
            }
          });
          return false;
        } else {
          return true;
        }
      }
    },
    // 跳转医生详情页
    async goDoctorIntroduction(item) {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        window.localStorage.removeItem("appoIdx");
        that.$router.push({ path: "/doctor_details", query: item });
      }
    },
    reservation() {
      this.alertShow = true;
    }
  }
};
</script>
<style scoped>
.bg_view {
  height: 100%;
  min-height: 100vh;
  background-color: #fff;
}

.button {
  width: 90%;
  margin: 0 auto;
  height: 3.13rem;
  background-color: #438eff;
  color: #fff;
  line-height: 3.13rem;
  text-align: center;
  font-weight: bold;
  font-size: 1.19rem;
  color: #ffffff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.38rem;
}

.box_view {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f0f6fb;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  border-radius: 1.63rem 1.63rem 0rem 0rem;
}

.box_view .title {
  height: 3.63rem;
  line-height: 3.63rem;
  font-weight: 500;
  font-size: 1.13rem;
  color: #3f4551;
}

.box_view .cancel {
  width: 1.31rem;
  height: 1.31rem;
  position: absolute;
  top: 1.25rem;
  right: 0.81rem;
}
.box_view .hospitalList {
  /* height: 10.69rem; */
  width: 100%;
  background-color: #fff;
  padding: 0 1.06rem;
}
.box_view .hospitalList .deptName{
  height: 3.31rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box_view .hospitalList .deptName .num{
  width: 2.5rem;
  height: 1.31rem;
  line-height: 1.31rem;
  text-align: center;
  background: #E4F1FF;
  border-radius: 2px 2px 2px 2px;
  font-weight: 400;
  font-size: 12px;
  color: #448EFF;
}
.box_view .doctorList {
  width: 22.44rem;
  overflow-x: auto;
  overflow-y: hidden;
  height: 7.38rem;
  background: #f0f5fb;
  border-radius: 0.38rem 0.38rem 0.38rem 0.38rem;
  /* padding: 0 0.81rem; */
  /* margin-bottom: 0.75rem; */
  display: flex;
  /* justify-content: space-between;
  align-items: center; */
}

.box_view .doctorList .info {
  /* height: 100%; */
  min-width: 6.06rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: .88rem 0 .69rem;
}

.box_view .doctorList .info .img {
  width: 2.88rem;
  height: 2.88rem;
  background: #F0F5FB;
}

.box_view .doctorList .num {
  font-weight: bold;
  font-size: 1.19rem;
  color: #f72d23;
}
</style>
